<template>
  <div class="view-container" id="menu">
    <list-header
      :title="'菜单列表'"
      :delText="isBatchesDel"
      :delLoading="delLoading"
      @del="del"
      @open-edit-dialog="openEditDialog($event)"
      @fetch-data="fetchData"
    >
      <div class="header-form-item title-search" slot="search-item-1">
        <el-input clearable v-model.trim="searchForm.pid" @input="AntiShake" placeholder="父级id" tabindex="1"/>
      </div>
<!--      <div class="header-form-item title-search" slot="search-item-2">
        <el-input clearable v-model.trim="user.userName" @input="AntiShake" placeholder="用户名" tabindex="1"/>
      </div>-->
    </list-header>

    <section class="table-container">
      <el-table
        ref="table"
        :data="tableData"
        stripe
        border
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" align="center"/>
        <el-table-column prop="title" label="菜单名称" align="center" ></el-table-column>
        <el-table-column prop="name" label="路由名称" align="center"></el-table-column>
        <el-table-column prop="path" label="路径" align="center" />
        <el-table-column prop="icon" label="图标" align="center" ></el-table-column>
        <el-table-column label="是否隐藏" align="center">
          <template slot-scope="s">
            <span v-text="s.row.hidden ? '是' : '否'"></span>
          </template>
        </el-table-column>
        <el-table-column prop="pid" label="父级id" align="center" ></el-table-column>
        <el-table-column prop="sort" label="序号" align="center" ></el-table-column>
      </el-table>
    </section>

    <menu-save ref="save-page" @update="fetchData"></menu-save>

  </div>
</template>

<script>
  import menuAPI from '@/api/menu/menu'
  import ListHeader from '@/common/ListHeader'
  import listMixin from '@/mixin/listMixin'
  import MenuSave from './MenuSave'
  export default {
    name: 'MenuList',
    components:{ListHeader,MenuSave},
    mixins:[listMixin],
    data() {
      return {
        mixinParams: {
          propertyName: 'id',
          API: menuAPI
        },
        searchForm:{
          pid:''
        }
      }
    },
    created() {

    },
    methods: {
      fetchData(){
        menuAPI.list(this.searchForm.pid).then(res=>{
          console.log('menuAPI.list',res)
          this.tableData = res.result
        })
      }
    }
  }
</script>

<style lang="scss">
  #menu {
    .el-dialog {
      width: 40%;
      left:50%;
      transform: translate(-50%, -50%);
    }
  }
</style>

<style scoped lang="scss">

</style>
